<template>
	<view>
		<!-- 选择城市的区块 -->
		<block v-if="isShow==true">
			<picker-view class="picker-view" indicator-style="height: 50px;" :value="value" @change="bindChange">
				<button class="cold_btn_ch" style="left:0px;" catchtap="changecityno">取消</button>
				<button class="cold_btn_ch" style="right:0px;" catchtap="changecityyes">确认</button>
				<picker-view-column>
					<view v-for="(item,index) in proviceData" :key="index" class="addr-item">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in cityData" class="addr-item">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</block>
		<!-- 选择城市的区块 -->
		<!-- banner图 -->
		<view style="position:relative;">
			<image src="../../static/img/index/bg.jpg" style="width:100%;" mode="widthFix"></image>
			<view class="cold_view_flex_r" style="position:absolute;top:36rpx;left:40rpx;font-size:36rpx;right:40rpx;">
				<view style="border: 2rpx solid #ffffff;height:56rpx;line-height:56rpx; border-radius:50rpx;text-align:center;padding:0 20rpx;color:#fff;">
					<image src="../../static/img/index/loc.png" style="width:36rpx;height:36rpx;margin-right:5rpx;vertical-align:middle;position:relative;top:-2px;"></image>
					<text>{{showcitynoshi}}</text>
				</view>
				<view style="position:absolute;right:60rpx;" bindtap="searchclassify">
					<icon type="search" size="24" color="#fff" />
				</view>
			</view>
			<view style="position:absolute;top:0;left:0;width:50%;height:200rpx;" bindtap="changecity">
			</view>
			<view style="position:absolute;top:0;right:0;width:40%;height:200rpx;" bindtap="searchclassify">
			</view>
			<view class="index_help" style='position:absolute;width:60rpx;height:17%;text-align:center;left:670rpx;top:30rpx;color:#fff; font-size:30rpx;'>
				<image src='../../static/img/index/help_custom.png' style='width:45rpx;height:45rpx;'></image>
				<text style='position:absolute;font-size:24rpx;bottom:10rpx;left:7rpx'>客服</text>
			</view>
		</view>
		<!-- banner图 -->
		<!-- 切换部分 -->
		<view style="margin-left:20rpx;margin-right:20rpx;position:relative;top:-70rpx;">
			<block v-for="(itemf,idxf) in dbinfo" :key="idxf">
				<view class="cold_view_flex_r classify_view">
					<view>
					  <image v-if="itemf.skey == '发票'" src="../../static/img/index/icon_r.png" class="classify_image"></image>
						<image v-else-if="itemf.skey == '企业证件'" src="../../static/img/index/icon_com.png" class="classify_image"></image>
						<image v-else-if="itemf.skey == '公告'" src="../../static/img/index/icon_ad.png" class="classify_image"></image>
						<image v-else-if="itemf.skey == '个人遗失'" src="../../static/img/index/icon_ind.png" class="classify_image"></image>
						<image v-else-if="itemf.skey == '车辆手续'" src="../../static/img/index/icon_car.png" class="classify_image"></image>
            <!-- 通用图标-->
            <image v-else src="../../static/img/index/icon_ord.png" class="classify_image"></image>
						<!-- 通用图标-->
					</view>
					<view class="classify_name">{{itemf.skey}}</view> 
					<view class="classify_ct">
						<text class="classify_name1">{{itemf.skey}}</text>
						<block v-for="(items,idxs) in itemf.value">
							{{items.name}}
						</block>
					</view>
					<view class="classify_jt">
						<view class="cold_right_jt"></view>
					</view>
				</view>
			</block>
		</view>
		<!-- 切换部分 -->
		<!-- 空白部分 -->
		<view class="iphone_footer_height"></view>
	</view>
</template>
<script>
	// 引用百度地图微信小程序JSAPI模块     
	var wxMarkerData = []; //定位成功回调对象  
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import cityData from '../../common/js/citydata.js'
	import bmap from '../../common/bmap-wx/bmap-wx.min.js'
	export default {
		data() {
			return {
				/**
				 * 切换城市
				 */
				isShow: false,
				proviceData: [],
				cityData: [],
				value: [10, 0],
				papers: [],
				dbinfo: [],
				showcity: '',
				showcitynoshi: '',
				/*自动定位城市*/
				ak: "LPrTiE3ix5FSdKCRsFU9SoS3wOL5kDKN", //填写申请到的ak
				markers: [],
				address: '', //地址    
				state: 1
			}
		},
		computed: {
			...mapState(['cityInfo', 'provinceInfo', 'openid'])
		},
		onLoad(options) {
			console.log("页面被加载")
			var self = this;
			var scene = decodeURIComponent(options.scene); //获取带参数的二维码参数值
			console.log("扫码进入场景值是", scene);
			if (scene != undefined && scene) {

			} else {

			}
			uni.showNavigationBarLoading()
			uni.login({
				provider: 'weixin',
				success: function(res) {
					console.log(res)
					if (res.code) {
						//发起网络请求
						uni.request({
							url: 'https://api.taxwen.com/wxapp/index/login',
							data: {
								code: res.code,
								other: -1
							},
							success: function(res) {
								if (res.data.t == 'fail') {
									uni.showModal({
										title: '提示',
										content: '服务器获取用户信息失败，请重进！',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {}
										}
									})
								} else {
									//openid放入全局变量
									var openid = res.data.openid;
									self.setOpenid(openid);
									console.log("openid主页onload是否拿到" + openid)

									/**
									 * 初始化切换城市
									 */
									var provinces = [];
									for (var i = 0; i < cityData.length; i++) {
										provinces.push(cityData[i].text)
									}
									var citys = [];
									for (var j = 0; j < (cityData[10].children).length; j++) {
										citys.push((cityData[10].children)[j].text);
									}
									self.proviceData = provinces
									self.cityData = citys
									// self.setData({
									//   proviceData: provinces,
									//   cityData: citys
									// })
									console.log(provinces);
									console.log(citys);
									// 先去后台查看上次登录城市，加载上次城市相关信息 。 返回 上次城市信息，及提示 定位城市是否切换，如果切换，再去后台请求 定位城市相关细信息
									// 如果上次城市 和 定位城市一致，则只是提示，不进行切换
									uni.request({
										url: 'https://api.taxwen.com/wxapp/index',
										data: {
											openid: openid,
											city: self.cityInfo,
											province: self.provinceInfo,
										},
										success: function(res) {
											console.log('请求主页成功', res)
											//console.log('请求主页成功', JSON.stringify(res.data.result))
											var ls_dbinfo = [];
											for (var kt in res.data.result) {
												console.log('what the fuck', kt)
												//将key存入一个数组 前台遍历数组 数组【{"key":"","value":""},{}】
												var value = [];
												value = res.data.result[kt];
												var s = "{\"skey\":\"" + kt + "\",\"value\":" + JSON.stringify(res.data.result[kt]) + "}";
												ls_dbinfo.push(JSON.parse(s));
											}
											self.showcity = res.data.showcity
											self.papers = res.data.papers
											self.dbinfo = ls_dbinfo

											
											uni.setStorage({
												key: "dbinfo",
												data: ls_dbinfo,
											})
											uni.setStorage({
												key: "showcity",
												data: res.data.showcity,
											})

											uni.hideNavigationBarLoading()
											/*自动定位城市*/
											/* 获取定位地理位置 */
											// 新建bmap对象     
											var BMap = new bmap.BMapWX({
												ak: self.ak
											});
											var fail = function(data) {
												console.log('------------------失败', data);
											};
											var success = function(data) {
												//返回数据内，已经包含经纬度    
												console.log('--------------------------成功', data);
												//使用wxMarkerData获取数据    
												wxMarkerData = data.wxMarkerData;
												//把所有数据放在初始化data内    
												self.state = 2
												self.setCityAndProvince(data.originalData.result.addressComponent.city, data.originalData.result.addressComponent
													.province)
												//app.globalData.cityInfo = data.originalData.result.addressComponent.city;
												//app.globalData.provinceInfo = data.originalData.result.addressComponent.province;
												// app.globalData.cityInfo = '合肥市';
												// app.globalData.provinceInfo = '安徽省';

												// var loccity = res.data.loccity;
												// var locprovince = res.data.locprovince;
												var loccity = self.cityInfo;
												var locprovince = self.provinceInfo;
												if (self.state == 1) {
													console.log('==========================================1111111111')
												} else if (self.state == 2) {
													uni.showModal({
														title: '定位到您在【' + loccity + '】',
														content: '是否切换至该城市？',
														confirmText: '切换',
														success: function(res) {
															if (res.confirm) {
																console.log('用户点击确定')
																self.requestIndex(locprovince, loccity, 'COLD');
															} else if (res.cancel) {
																console.log('用户点击取消')
															}
														}
													})
												}
											}
											//发起regeocoding检索请求     
											BMap.regeocoding({
												fail: fail,
												success: success
											});
											/*自动定位城市*/
										},
										fail: function(res) {
											console.log('拉取用户openid失败，将无法正常使用开放接口等服务', res)
										}
									})
								}
							},
							fail: function(err) {
								console.log('获取用户登录态失败！' + err)
								uni.showModal({
									title: '提示',
									content: '请求服务器失败，请重进！',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							}
						})
					} else {
						console.log('获取用户登录态失败！' + res.errMsg)
						uni.showModal({
							title: '提示',
							content: '获取信息失败，请重进！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {}
							}
						})
					}
				}
			});
		},
		methods: {
			...mapMutations(['setOpenid']),
			...mapMutations(['setCityAndProvince']),
			/**
			 * 请求后台获取主页信息
			 */
			requestIndex(province, city, fwtype) {
				var self = this;
				uni.request({
					url: 'https://api.taxwen.com/wxapp/index',
					data: {
						province: province,
						city: city,
						fwtype: fwtype,
						openid: this.openid,
					},
					success: function(res) {
						console.log('请求主页成功', res)
						//console.log('请求主页成功', JSON.stringify(res.data.result))
						var ls_dbinfo = [];
						for (var kt in res.data.result) {
							console.log('what the fuck', kt)
							//将key存入一个数组 前台遍历数组 数组【{"key":"","value":""},{}】
							var value = [];
							value = res.data.result[kt];
							var s = "{\"skey\":\"" + kt + "\",\"value\":" + JSON.stringify(res.data.result[kt]) + "}";
							ls_dbinfo.push(JSON.parse(s));
						}
						self.showcity = res.data.showcity
						self.papers = res.data.papers
						self.dbinfo = ls_dbinfo

						uni.setStorage({
							key: "dbinfo",
							data: ls_dbinfo,
						})
						uni.setStorage({
							key: "showcity",
							data: res.data.showcity,
						})

						uni.hideNavigationBarLoading()
					},
					fail: function(res) {
						console.log('拉取用户openid失败，将无法正常使用开放接口等服务', res)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		padding: 0;
		line-height: 1;
	}

	/* VERSION 2*/
	.classify_view {
		height: 140rpx;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		position: relative;
	}

	.classify_image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 48rpx;
		margin-right: 30rpx;
	}

	.classify_name {
		font-size: 36rpx;
		color: #636363;
		margin-right: 30rpx;
		white-space: nowrap;
	}

	.classify_name1 {
		font-size: 36rpx;
		color: #636363;
		margin-right: 30rpx;
	}

	.classify_ct {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #B8B8B8;
		position: absolute;
		left: 138rpx;
		right: 100rpx;
		top: 33%;
	}

	.classify_jt {
		position: absolute;
		right: 40rpx;
		top: 40%;
	}

	/*切换城市*/
	.cold-btn-s1 {
		border-radius: 0;
		width: 36rpx;
		float: right;
	}

	.showcity_view::after {
		content: " ";
		display: inline-block;
		height: 18rpx;
		width: 18rpx;
		border-width: 5rpx 5rpx 0 0;
		border-color: #fff;
		border-style: solid;
		-webkit-transform: matrix(.71, .71, .71, -.71, 0, 0);
		transform: matrix(.71, .71, .71, -.71, 0, 0);

		position: relative;

		top: -8rpx;

	}

	.cold_right_jt::after {
		content: " ";
		display: inline-block;
		height: 18rpx;
		width: 18rpx;
		border-width: 5rpx 5rpx 0 0;
		border-color: #B8B8B8;
		border-style: solid;
		-webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
		transform: matrix(.71, .71, -.71, .71, 0, 0);

		position: relative;

	}

	.cold_img_cc {
		width: 32rpx;
		max-width: 32rpx;
		margin-top: 18rpx;
	}

	.cold_text_cc {
		margin-left: 20rpx;
		color: red;
		font-size: 40rpx;
	}

	.cold_btn_ch {
		position: absolute;
		top: 0px;
		z-index: 1000;
		margin-top: 0px;
		border-radius: 0px;
		height: 80rpx;
		font-size: 36rpx;
		width: 50%;
		line-height: 80rpx;
		border: 0px solid #fff;
		background-color: black;
		color: #fff;
	}

	.picker-view {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 600rpx;
		background-color: black;
		color: white;
		z-index: 999;
	}

	.addr-item {
		line-height: 100rpx;
		text-align: center;
	}

	/*切换城市下方  四张照片*/
	.cold_view_fp_f {
		position: relative;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
	}

	.cold_view_fp_s {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		width: 49%;
	}

	.cell--bubble {
		width: 50rpx !important;
		height: 50rpx !important;
		opacity: 0.1 !important;
	}

	.cell--light_without_border {
		width: 0 !important;

	}

	.cell--light_without_border {
		width: 0 !important;
	}

	.contact_customer {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
</style>
